<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>wedding</title>
</head>
<style>
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  body {
    width: 100vw;
    height: 100vh;
    padding: 0;
  }
  /* 背景改变轮播图 */
  .container3 {
    width: calc(100%);
    height: calc(100%);
    margin: 0 auto;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .container3 > div {
    height: clamp(600px, 100%, 100%);
    background-size: contain;
    background-repeat: no-repeat;
  }
  .container3 .img-box {
    aspect-ratio: 2 / 3;
    background-image: url(./webp/JUN1.webp);
  }
  .container3 .img-boxW {
    aspect-ratio: 1.5 / 1;
    background-image: url(./webp/JUN18.webp);
  }

  .container3 .imgPause {
    animation-play-state: paused;
  }
  .container3 .img-boxW {
    animation-name: changeBG2;
    animation-duration: 20s;
    /*animation-timing-function: ease;*/
    animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
    animation-iteration-count: infinite;
    animation-delay: 1.5s;
  }

  /* 动画设置 */
  .container3 .img-box {
    animation-name: changeBG;
    animation-duration: 40s;
    /*animation-timing-function: ease;*/
    animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
    animation-iteration-count: infinite;
    animation-delay: 1s;
  }

  @keyframes changeBG {
    0% { background-image: url(./webp/JUN1.webp); }
    5.5% { background-image: url(./webp/JUN2.webp); }
    11% { background-image: url(./webp/JUN3.webp); }
    16.5% { background-image: url(./webp/JUN4.webp); }
    22% { background-image: url(./webp/JUN5.webp); }
    27.5% { background-image: url(./webp/JUN6.webp); }
    33% { background-image: url(./webp/JUN7.webp); }
    38.5% { background-image: url(./webp/JUN8.webp); }
    44% { background-image: url(./webp/JUN9.webp); }
    49.5% { background-image: url(./webp/JUN10.webp); }
    55% { background-image: url(./webp/JUN11.webp); }
    60.5% { background-image: url(./webp/JUN12.webp); }
    66% { background-image: url(./webp/JUN13.webp); }
    71.5% { background-image: url(./webp/JUN14.webp); }
    77% { background-image: url(./webp/JUN15.webp); }
    82.5% { background-image: url(./webp/JUN16.webp); }
    88% { background-image: url(./webp/JUN17.webp); }
    100% { background-image: url(./webp/JUN1.webp); }
  }
  @keyframes changeBG2 {
    0% { background-image: url(./webp/JUN18.webp); }
    12.5% { background-image: url(./webp/JUN19.webp); }
    25% { background-image: url(./webp/JUN20.webp); }
    37.5% { background-image: url(./webp/JUN21.webp); }
    50% { background-image: url(./webp/JUN22.webp); }
    62.5% { background-image: url(./webp/JUN23.webp); }
    75% { background-image: url(./webp/JUN24.webp); }
    87.5% { background-image: url(./webp/JUN25.webp); }
    100% { background-image: url(./webp/JUN18.webp); }
  }

</style>
<body>
<div class="container3">
  <div id="img" class="img-box"></div>
</div>
<audio src="./lover.mp3" class="audio" autoplay preload="auto" loop></audio>
<script>

  document.addEventListener('click', () => {
    const music = document.querySelector(".audio")
    music.play()
  })

  const addAspect = () => {
    const urlStr = window.getComputedStyle(document.querySelector('#img')).getPropertyValue('backGround-image')
    const classArr = document.querySelector('#img').classList
    if(urlStr) {
      const strList = urlStr.match(/JUN\d+\.webp/)
      if(Array.isArray(strList)) {
        const imgStr = strList[0].replace('JUN', '').split('.')
        const firstStr = imgStr[0]
        const imgNum = parseInt(firstStr)
        if(imgNum === 17 || imgNum === 25) {
          classArr.toggle('imgPause')
          classArr.toggle('img-box')
          classArr.toggle('img-boxW')
          classArr.toggle('imgPause')
        }
      }
    }
  }

  setInterval(addAspect, 10)

</script>
</body>
</html>